<template>
  <el-dialog :modelValue="dialogTableVisible" :title="title" :close-on-press-escape="false" draggable
    :close-on-click-modal="false" :before-close="handleClose" :width="width">
    <slot />
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="hanlde('close')">关闭</el-button>
        <el-button type="primary" @click="hanlde('add')" v-if="show">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
const props = defineProps({
  // 是否显示弹窗
  dialogTableVisible: {
    type: Boolean,
    default: false
  },
  // 是否展示确认按钮
  show: {
    type: Boolean,
    default: true
  },
  // 标题
  title: {
    type: String,
    default: ''
  },
  // 宽度
  width: {
    type: String,
    default: ''
  }
})

const emit = defineEmits(['handle'])
// 关闭和确认事件
function hanlde(type) {
  // close：是取消事件；add：是确认事件
  emit('handle', type)
}

// 右上角关闭事件
function handleClose(done) {
  emit('handle', 'close')
  done()
}

</script>

<style lang="scss" scoped></style>